<%@ taglib prefix="for" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/12/19
  Time: 16:19
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Book Shop</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" type="image/x-icon" href="assets/img/icon/favicon.png">

    <!-- CSS here -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/owl.carousel.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/slicknav.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/animate.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/price_rangs.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/magnific-popup.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/fontawesome-all.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/themify-icons.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/slick.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/nice-select.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/style.css">
    <style>
        #huifu:hover{
            cursor: pointer;
        }
    </style>
</head>
<body>
<jsp:include page="header.jsp" flush="true"/>
<main>
    <!--  services-area start-->
    <div class="services-area2">
        <div class="container">
            <div class="row">
                <div class="col-xl-12">
                    <div class="row">
                        <div class="col-xl-12">
                            <!-- Single -->
                            <div class="single-services d-flex align-items-center mb-0">
                                <div class="features-img">
                                    <img src="${book.bookImg}" alt="" width="282px" height="427px">
                                </div>
                                <div class="features-caption">
                                    <h3>${book.bookName}</h3>
                                    <p>${book.author.authorName}</p>
                                    <div class="price">
                                        <span>${book.price}</span>
                                    </div>
                                    <div class="review">
                                        <div class="rating">
                                            <i class="fas fa-star"></i>
                                            <i class="fas fa-star"></i>
                                            <i class="fas fa-star"></i>
                                            <i class="fas fa-star"></i>
                                            <i class="fas fa-star-half-alt"></i>
                                        </div>
                                        <p>(120 Review)</p>
                                    </div>
                                    <a href="${pageContext.request.contextPath}/bookStore/addcart?userId=${sessionScope.user.id}&bookId=${book.bookId}&counts=1" class="white-btn mr-10">加入购物车</a>
                                    <a href="#" class="border-btn share-btn"><i class="fas fa-share-alt"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- services-area End-->
    <!--Books review Start -->
    <section class="our-client section-padding best-selling">
        <div class="container">
            <div class="row">
                <div class="offset-xl-1 col-xl-10">
                    <div class="nav-button f-left">
                        <!--Nav Button  -->
                        <nav>
                            <div class="nav nav-tabs " id="nav-tab" role="tablist">
                                <a class="nav-link active" id="nav-one-tab" data-bs-toggle="tab" href="#nav-one"
                                   role="tab" aria-controls="nav-one" aria-selected="true">书籍描述</a>
                                <a class="nav-link" id="nav-two-tab" data-bs-toggle="tab" href="#nav-two" role="tab"
                                   aria-controls="nav-two" aria-selected="false">作者</a>
                                <a class="nav-link" id="nav-three-tab" data-bs-toggle="tab" href="#nav-three" role="tab"
                                   aria-controls="nav-three" aria-selected="false">评论</a>
                            </div>
                        </nav>
                        <!--End Nav Button  -->
                    </div>
                </div>
            </div>
        </div>
        <div class="container">
            <!-- Nav Card -->
            <div class="tab-content" id="nav-tabContent">
                <div class="tab-pane fade show active" id="nav-one" role="tabpanel" aria-labelledby="nav-one-tab">
                    <!-- Tab 1 -->
                    <div class="row">
                        <div class="offset-xl-1 col-lg-9">
                            <p>${book.detail}</p>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="nav-two" role="tabpanel" aria-labelledby="nav-two-tab">
                    <!-- Tab 2 -->
                    <div class="row">
                        <div class="offset-xl-1 col-lg-9">
                            <p>${book.author.authorDetail}</p>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="nav-three" role="tabpanel" aria-labelledby="nav-three-tab">
                    <!-- Tab 3 -->
                    <div class="row">
                        <div class="offset-xl-1 col-lg-9">
                            <div class="col-md-4 column" style="height: 80px;">
                                <form action="${pageContext.request.contextPath}/bookStore/addComment" method="post">
                                    <input type="hidden" value="${book.bookId}" name="bookId">
                                    <input type="hidden" value="${sessionScope.user.id}" name="userId">
                                    <input type="text" name="discuss" placeholder="请输入……" style="border-radius: 30px;width: 800px;height: 88px;">
                                    <input type="hidden" name="pId" value="0">
                                    <input type="submit" value="发表评论" style="position: relative; left: 810px; top: -86px; width: 80px; height:80px; border-radius: 30%" class="fabiao" >
                                </form>
                            </div>
                            <%--<div class="row">
                                <div class="col-md-4 column">
                                    ${sessionScope.user.id}
                                    <form action="${pageContext.request.contextPath}/bookStore/addComment" method="post">
                                        <input type="hidden" value="${book.bookId}" name="bookId">
                                        <input type="hidden" value="${sessionScope.user.id}" name="userId">
                                        <input type="text" name="discuss" placeholder="${sessionScope.user.id}" style="border-radius: 30px;width: 800px;height: 88px;" value="${sessionScope.user.id}">
                                        <input type="hidden" name="pId" value="0">
                                        <input type="submit" value="发表评论" style="position: relative; left: 810px; top: -86px; width: 80px; height:80px; border-radius: 30%" class="fabiao" >
                                    </form>
                                </div>
                            </div>
                            <for:forEach var="comment" items="${comments}">

                                <img src="${comment.get(0).user.avatar}" style="width: 20px;height: 20px;border-radius: 50%">&nbsp;${comment.get(0).user.nickname}:
                                <span style="float: right;">
                                        ${comment.get(0).createTime}
                                </span><br>
                                <div style="padding-left: 20px">
                                    ${comment.get(0).discuss}
                                    <span style="float: right;">
                                        <c:set var="userid" value="${comment.get(0).user.id}" scope="session"/>
                                        <c:if test="${sessionScope.user.id==userid}"><a href="${pageContext.request.contextPath}/bookStore/deleteComment?id=${comment.get(0).commentId}" style="color: #0dcaf0;">删除</a></c:if>
                                        <a id="huifu" style="color: #0dcaf0;">回复</a>
                                    </span><br>

                                </div>
                                <div id="huifukuang" class="col-md-4 column" style="display: none">
                                    <form action="${pageContext.request.contextPath}/bookStore/addComment" method="post">
                                        <input type="hidden" value="0" name="bookId">
                                        <input type="hidden" value="${sessionScope.user.id}" name="userId">
                                        <input type="text" name="discuss" placeholder="SANB" style="border-radius: 30px;width: 800px;height: 88px;">
                                        <input type="hidden" name="pId" value="${comment.get(0).commentId}">
                                        <input type="submit" value="发表评论" style="position: relative; left: 810px; top: -86px; width: 80px; height:80px; border-radius: 30%" class="fabiao">
                                    </form>
                                </div>
                                <for:forEach var="ct" items="${comment.get(1)}">
                                    ${sessionScope.user}
                                    <div style="width: 100%;height: 50px;background-color: #28FF28">
                                        <div style="padding-left: 50px">
                                            <img src="${ct.user.avatar}" style="width: 20px;height: 20px;border-radius: 50%">&nbsp;${ct.user.nickname}:
                                            <span style="float: right;">
                                                    ${ct.createTime}
                                            </span><br>
                                            <div style="padding-left: 20px">
                                                    ${ct.discuss}
                                                <span style="float: right;">
                                                <c:set var="userid" value="${ct.userId}" scope="session"/>
                                                <c:if test="${sessionScope.user.id==userid}"><a href="${pageContext.request.contextPath}/bookStore/deleteComment?id=${ct.commentId}" style="color: #0dcaf0;">删除</a></c:if>
                                                </span><br>
                                            </div>
                                        </div>
                                    </div>
                                </for:forEach>
                            </for:forEach>--%>
                            <div class="comments-area">
                                    <h4><trans oldtip="05 Comments" newtip="评论" style="">${comments.size()}条评论</trans></h4>
                                    <div class="comment-list">
                                        <for:forEach items="${comments}" var="comment">
                                            <div class="single-comment justify-content-between d-flex" style="height: 106.8px">
                                                <div class="user justify-content-between d-flex">
                                                    <div class="thumb">
                                                        <img src="${comment.get(0).user.avatar}" alt="">
                                                    </div>
                                                    <div class="desc">
                                                        <trans>${comment.get(0).discuss}</trans>
                                                        <div class="d-flex justify-content-between" style="margin-bottom: 20px;border-bottom: 1px solid #6c757d;width: 800px">
                                                            <div class="d-flex align-items-center">
                                                                <h5>
                                                                    <trans style="color: #999999;">${comment.get(0).user.nickname}</trans>
                                                                </h5>
                                                                <p class="date"><trans>${comment.get(0).createTime}</trans></p>
                                                            </div>
                                                            <div class="reply-btn">
                                                                <c:set var="userid" value="${comment.get(0).user.id}" scope="session"/>
                                                                <c:if test="${sessionScope.user.id==userid}">
                                                                    <a href="${pageContext.request.contextPath}/bookStore/deleteComment?id=${comment.get(0).commentId}" class="btn-reply text-uppercase"><trans>删除</trans></a>
                                                                </c:if>
                                                                <a class="btn-reply text-uppercase" id="huifu"><trans>回复︾</trans></a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div id="huifukuang" class="col-md-4 column" style="display: none">
                                                <form action="${pageContext.request.contextPath}/bookStore/addComment" method="post">
                                                    <input type="hidden" value="0" name="bookId">
                                                    <input type="hidden" name="userId" value="${sessionScope.user.id}">
                                                    <input type="text" name="discuss" placeholder="请输入……" style="border-radius: 30px;width: 800px;height: 88px;">
                                                    <input type="hidden" name="pId" value="${comment.get(0).commentId}">
                                                    <input type="submit" value="发表评论" style="position: relative; left: 810px; top: -86px; width: 80px; height:80px; border-radius: 30%" class="fabiao">
                                                </form>
                                            </div>
                                            <for:forEach var="ct" items="${comment.get(1)}">
                                                <div class="single-comment justify-content-between d-flex" style="margin-left: 70px;margin-bottom: 20px;height: 75.8px;">
                                                    <div class="user justify-content-between d-flex">
                                                        <div class="thumb">
                                                            <img src="${ct.user.avatar}" alt="">
                                                        </div>
                                                        <div class="desc">
                                                            <trans>${ct.discuss}</trans>
                                                            <div class="d-flex justify-content-between" style="margin-bottom: 20px;border-bottom: 1px solid #6c757d;width: 730px">
                                                                <div class="d-flex align-items-center">
                                                                    <h5>
                                                                        <trans style="color: #999999;">${ct.user.nickname}</trans>
                                                                    </h5>
                                                                    <p class="date"><trans>${ct.createTime}</trans></p>
                                                                </div>
                                                                <div class="reply-btn">
                                                                    <c:set var="userid" value="${ct.userId}" scope="session"/>
                                                                    <c:if test="${sessionScope.user.id==userid}">
                                                                        <a href="${pageContext.request.contextPath}/bookStore/deleteComment?id=${ct.commentId}" class="btn-reply text-uppercase"><trans>删除</trans></a>
                                                                    </c:if>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </for:forEach>
                                        </for:forEach>
                                    </div>
                                </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Books review End -->
    <!-- Subscribe Area Start -->
    <section class="subscribe-area">
        <div class="container">
            <div class="subscribe-caption text-center  subscribe-padding section-img2-bg"
                 data-background="assets/img/gallery/section-bg1.jpg">
                <div class="row justify-content-center">

                    <div class="col-xl-6 col-lg-8 col-md-9">
                        <h3>Join Newsletter</h3>
                        <p>Lorem started its journey with cast iron (CI) products in 1980. The initial main objective
                            was to ensure pure water and affordable irrigation.</p>
                        <form action="#">
                            <input type="text" placeholder="Enter your email">
                            <button class="subscribe-btn">Subscribe</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Subscribe Area End -->
</main>
<footer>
    <div class="footer-wrappper section-bg">
        <div class="footer-area footer-padding">
            <div class="container">
                <div class="row justify-content-between">
                    <div class="col-xl-3 col-lg-5 col-md-4 col-sm-6">
                        <div class="single-footer-caption mb-50">
                            <div class="single-footer-caption mb-30">
                                <!-- logo -->
                                <div class="footer-logo mb-25">
                                    <a href="index.html"><img src="assets/img/logo/logo2_footer.png" alt=""></a>
                                </div>
                                <div class="footer-tittle">
                                    <div class="footer-pera">
                                        <p>Get the breathing space now, and we’ll extend your term at the other end year
                                            for go.</p>
                                    </div>
                                </div>
                                <!-- social -->
                                <div class="footer-social">
                                    <a href="https://bit.ly/sai4ull"><i class="fab fa-facebook"></i></a>
                                    <a href="#"><i class="fab fa-instagram"></i></a>
                                    <a href="#"><i class="fab fa-linkedin-in"></i></a>
                                    <a href="#"><i class="fab fa-youtube"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-2 col-lg-3 col-md-4 col-sm-5">
                        <div class="single-footer-caption mb-50">
                            <div class="footer-tittle">
                                <h4>Book Category</h4>
                                <ul>
                                    <li><a href="#">History</a></li>
                                    <li><a href="#">Horror - Thriller</a></li>
                                    <li><a href="#">Love Stories</a></li>
                                    <li><a href="#">Science Fiction</a></li>
                                    <li><a href="#">Business</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
                        <div class="single-footer-caption mb-50">
                            <div class="footer-tittle">
                                <h4>&nbsp;</h4>
                                <ul>
                                    <li><a href="#">Biography</a></li>
                                    <li><a href="#">Astrology</a></li>
                                    <li><a href="#">Digital Marketing</a></li>
                                    <li><a href="#">Software Development</a></li>
                                    <li><a href="#">Ecommerce</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-lg-4 col-md-4 col-sm-6">
                        <div class="single-footer-caption mb-50">
                            <div class="footer-tittle">
                                <h4>Site Map</h4>
                                <ul class="mb-20">
                                    <li><a href="#">Home</a></li>
                                    <li><a href="#">About Us</a></li>
                                    <li><a href="#">FAQs</a></li>
                                    <li><a href="#">Blog</a></li>
                                    <li><a href="#">Contact</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- footer-bottom area -->
        <div class="footer-bottom-area">
            <div class="container">
                <div class="footer-border">
                    <div class="row d-flex align-items-center">
                        <div class="col-xl-12 ">
                            <div class="footer-copy-right text-center">
                                Copyright &copy;<script>document.write(new Date().getFullYear());</script>
                                All rights reserved | This template is made with <i class="fa fa-heart color-danger"
                                                                                    aria-hidden="true"></i> by <a
                                    href="https://colorlib.com" style="color: black" target="_blank"
                                    rel="nofollow noopener">Colorlib</a>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</footer>
<!-- Scroll Up -->
<div id="back-top">
    <a title="Go to Top" href="#"> <i class="fas fa-level-up-alt"></i></a>
</div>

<!-- JS here -->
<!-- Jquery, Popper, Bootstrap -->
<script src="${pageContext.request.contextPath}/statics/js/vendor/modernizr-3.5.0.min.js"></script>
<script src="${pageContext.request.contextPath}/statics/js/vendor/jquery-1.12.4.min.js"></script>
<script src="${pageContext.request.contextPath}/statics/js/popper.min.js"></script>
<script src="${pageContext.request.contextPath}/statics/js/bootstrap.min.js"></script>

<!-- Slick-slider , Owl-Carousel ,slick-nav -->
<script src="${pageContext.request.contextPath}/statics/js/owl.carousel.min.js"></script>
<script src="${pageContext.request.contextPath}/statics/js/slick.min.js"></script>
<script src="${pageContext.request.contextPath}/statics/js/jquery.slicknav.min.js"></script>

<!--wow , counter , waypoint, Nice-select -->
<script src="${pageContext.request.contextPath}/statics/js/wow.min.js"></script>
<script src="${pageContext.request.contextPath}/statics/js/jquery.magnific-popup.js"></script>
<script src="${pageContext.request.contextPath}/statics/js/jquery.nice-select.min.js"></script>
<script src="${pageContext.request.contextPath}/statics/js/jquery.counterup.min.js"></script>
<script src="${pageContext.request.contextPath}/statics/js/waypoints.min.js"></script>
<script src="${pageContext.request.contextPath}/statics/js/price_rangs.js"></script>

<!-- contact js -->
<script src="${pageContext.request.contextPath}/statics/js/contact.js"></script>
<script src="${pageContext.request.contextPath}/statics/js/jquery.form.js"></script>
<script src="${pageContext.request.contextPath}/statics/js/jquery.validate.min.js"></script>
<script src="${pageContext.request.contextPath}/statics/js/mail-script.js"></script>
<script src="${pageContext.request.contextPath}/statics/js/jquery.ajaxchimp.min.js"></script>

<!--  Plugins, main-Jquery -->
<script src="${pageContext.request.contextPath}/statics/js/plugins.js"></script>
<script src="${pageContext.request.contextPath}/statics/js/main.js"></script>
<script>
    let huifu = document.querySelectorAll("#huifu");
    let huifukuang = document.querySelectorAll("#huifukuang");
    for (let i=0;i<huifu.length;i++){
        huifu[i].onclick = function () {
            if (huifukuang[i].style.display == "none"){
                huifu[i].innerHTML = "收起回复︽"
                huifukuang[i].style.display = 'block';
            }else {
                huifu[i].innerHTML = "回复︾"
                huifukuang[i].style.display = 'none';
            }
        }
    }

    let fabiao = document.querySelectorAll(".fabiao");
    for (let i = 0;i<fabiao.length;i++){
        fabiao[i].onclick = function () {
            if (${sessionScope.user.id == null}) {
                alert("请先登录");
                return false;
            }
        }
    }

    $(function () {
        if(window.name != "page1"){
            location.reload();
            window.name = "page1";
        }
        else{
            window.name = "";
        }
    })


</script>
</body>
</html>
